"use strict";

$(function () {
    $(".modal .close").click(function () {
        $(".modal").addClass("hide");
        $('body').css({
            "overflow-x": "auto",
            "overflow-y": "auto",
            'padding-right': '0px'
        });
    });
    loadList();
    clickUser();
    //加载列表
    function loadList() {
        $.ajax({
            type: "post",
            url: "/wzmanage/user/list",
            contentType: "application/json;charset=utf-8",
            success: function success(data) {
                console.log(data);
                if (data instanceof Array && data.length > 0) {
                    for (var i = 0, html; i < data.length; i++) {
                        html += "<tr>\n                        <td class=\"userName\"><span>" + data[i].name + "</span>\n                         <input type=\"hidden\" class=\"locked\" value=\"" + data[i].locked + "\">\n                         <input type=\"hidden\" class=\"id\" value=\"" + data[i].id + "\"></td>\n                         \n                        <td class=\"nickName\">" + data[i].nickName + "</td>\n                        <td class=\"sex\">" + data[i].sex + "</td>\n                        <td class=\"phone\">" + data[i].phone + "</td>\n                        <td class=\"fixPhone\">" + data[i].fixPhone + "</td>\n                        \n                        <td class=\"age\">" + data[i].age + "</td>\n                        <td class=\"posId\">" + data[i].postId + "</td>\n                        <td class=\"createTime\">" + data[i].createTime.slice(0, 10) + "</td>\n                        <td class=\"job\">" + data[i].job + "</td> \n                        <td class=\"usersGroup\">" + data[i].usersGroup + "</td>\n                        <td class=\"qq\">" + data[i].qq + "</td>\n                        <td class=\"mail\">" + data[i].mail + "</td>\n               \n                    </tr>";
                    }
                } else {

                    html = "<tr><td colspan=\"12\">\u6682\u65E0\u6210\u5458</td></tr>";
                }
                $(".user-list tbody").html(html);
            }
        });
    };
    //用户增删改列表
    $(".add-del-person").on("click", "a", function (e) {
        e.preventDefault();
        var index = $(this).index();
        if (index == 0) {
            //增加人员
            var ht = $("html").width();
            $('body').css({
                "overflow-x": "hidden",
                "overflow-y": "hidden"
            });
            addHtml();
            $(".new-add").removeClass("hide");
            var ml = $(".new-add").width();
            $('body').css({ "padding-right": ml - ht + "px" });
            addUser();
        } else if (index == 1) {
            //修改人员

            allUserInfo();
        } else if (index == 2) {
            //删除人员
            deluserInfo();
        }
        console.log($(this).index());
    });
    //删除人员
    function deluserInfo() {
        var tdinfo = $(".user-list tbody tr.active");
        var id = tdinfo.find(".id").val();
        console.log(id);
        if (id) {
            if (confirm("确定要删除？")) {
                $.ajax({
                    url: "/wzmanage/user/delete/" + id,
                    success: function success(data) {
                        console.log(data);
                        if (data == "OK") {
                            $(".new-add").addClass("hide");
                            $(".add-success").css("display", "block");
                            $(".add-success h3").html("删除人员成功");
                            setTimeout(function () {
                                $(".add-success").fadeOut();
                            }, 500);
                            loadList();
                        }
                    },
                    error: function error(data) {
                        console.log(data);
                    }
                });
            }
        }
    }
    //新增人员操作
    function addUser() {
        $(".new-add .save").unbind();
        $(".new-add .save").click(function () {

            if (isEmpty() == 1) {
                return;
            } else if (isEmpty() == 2) {
                alert("请分配角色");
                return;
            } else if (isEmpty() == 3) {
                alert("请先建角色");return;
            }

            var obj = $(".user-form").serializeObject();
            if (!(obj.rolesitems instanceof Array) && obj.rolesitems != null) {
                obj.rolesitems = [obj.rolesitems];
            }
            console.log(JSON.stringify(obj));
            $.ajax({
                url: "/wzmanage/user/addUser",
                type: "post",
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(obj),
                success: function success(data) {
                    if (data == "OK") {
                        $('body').css({
                            "overflow-x": "auto",
                            "overflow-y": "auto",
                            'padding-right': '0px'
                        });
                        $(".new-add").addClass("hide");
                        $(".add-success h3").html("新增人员成功");
                        $(".add-success").css("display", "block");
                        setTimeout(function () {
                            $(".add-success").fadeOut();
                        }, 500);
                        loadList();
                    }
                },
                error: function error(data) {
                    console.log(data);
                }
            });
        });
    }
    //选中人员操作
    function clickUser() {
        //点击选中人员所在的行
        $(".user-list tbody").on("click", 'tr', function () {
            if ($(this).hasClass("active")) {
                $(this).removeClass("active");
            } else {
                $(this).addClass("active").siblings(".active").removeClass("active");
            }
        });
    }
    //获得所在的行人员信息
    function allUserInfo() {
        $(".new-add .save").unbind();
        //把人员信息添加到表当中
        var tdinfo = $(".user-list tbody tr.active");
        var id = tdinfo.find(".id").val();
        var time=new Date().getTime()
        console.log(time)
        $.ajax({
            type: "get",
            url: "/wzmanage/user/update/"+id ,
            contentType: "application/json;charset=utf-8",
            // data: JSON.stringify({id:id,time:time}),
            success: function success(data) {
                console.log(data);
                var info = data.userInfo;

                if (tdinfo.length) {
                    var ht = $("html").width();
                    $('body').css({
                        "overflow-x": "hidden",
                        "overflow-y": "hidden"
                    });
                    var html = "<tr>\n                                        <td>\u59D3\u540D:</td>\n                                        <td><input type=\"hidden\" name=\"id\" value=\"" + info.id + "\">\n                                        <input class=\"form-control\" name=\"name\" type=\"text\"  value=\"" + info.name + "\"><span class=\"glyphicon glyphicon-user\"></span></td>\n                                        <td>\u6027\u522B:</td>\n                                        <td>\n                                            <input id=\"sexMan\" name=\"sex\" " + (info.sex == "男" ? "checked" : "") + " type=\"radio\" value=\"\u7537\">\n                                            <label for=\"sexMan\">\u7537</label>\n                                            <input id=\"sexWoman\" name=\"sex\" " + (info.sex == "女" ? "checked" : "") + " type=\"radio\" value=\"\u5973\">\n                                            <label for=\"sexWoman\">\u5973</label>\n                                        </td>\n                            </tr>\n                            <tr> \n                               <td>\u6635\u79F0:</td>\n                               <td> <input type=\"text\" class=\"form-control\" name=\"nickName\" value=\"" + info.nickName + "\"></td>\n                               <td>\u5EA7\u673A\u53F7:</td>\n                               <td><input type=\"text\" class=\"form-control\" name=\"fixPhone\" value=\"" + info.fixPhone + "\"></td>     \n                            </tr>\n                            <tr>\n                                <td>\u624B\u673A:</td>\n                                <td><input class=\"form-control\" name=\"phone\" type=\"text\" readonly value=\"" + info.phone + "\"></td>\n                                <td>\u5E74\u9F84:</td>\n                                <td><input class=\"form-control\" name=\"age\"  type=\"text\" value=\"" + info.age + "\"></td>\n                            </tr>\n                            <tr>\n                               <td>qq:</td>\n                               <td><input type=\"text\" class=\"form-control\" name=\"qq\" value=\"" + info.qq + "\"></td> \n                                <td>\n                                    \u804C\u4F4D:\n                                </td>\n                                <td>\n                                    <input name=\"job\" class=\"form-control\" type=\"text\" value=\"" + info.job + "\">\n                                </td>\n                            </tr>\n                            <tr>\n                                <td>\u4E0A\u5C97\u8BC1\u7F16\u53F7:</td>\n                                <td><input name=\"postId\" class=\"form-control\" readonly type=\"text\" value=\"" + info.postId + "\"></td>\n                                 <td>\u6240\u5C5E\u5206\u7EC4:</td>\n                                <td>\n                                    <select name=\"usersGroup\" class=\"form-control\" >\n                                    <option value=\"\u9884\u62A5\u7EC4\">\u9884\u62A5\u7EC4</option>\n                                    <option value=\"\u91C7\u96C6\u7EC4\">\u91C7\u96C6\u7EC4</option>\n                                </select>\n                                </td>\n                                \n                            </tr>\n                            <tr>\n                                <td>\u662F\u5426\u9501\u5B9A:</td>\n                                <td><select name=\"locked\" class=\"form-control\" >\n                                    <option value=\"false\">\u4E0D\u9501\u5B9A</option>\n                                    <option value=\"true\">\u9501\u5B9A</option>\n                                </select></td>\n                                <td>\u90AE\u7BB1:</td> \n                               \n                               <td><input type=\"text\" class=\"form-control\" name=\"mail\" value=\"" + info.mail + "\"></td> \n                            </tr>\n                            <tr>\n                               \n                               \n                                <td>\u89D2\u8272\u5206\u914D:</td>\n                                <td colspan=\"3\">\n                            ";
                    for (var i = 0, list = data.roleList; i < list.length; i++) {
                        html += "<input type=\"checkbox\" " + ischecked(data.myRole, list[i].id) + " name=\"rolesitems\" id=\"" + i + "\" value=\"" + data.roleList[i].id + "\">\n                                <label style=\"margin: 0 5px 0 0 \" for=\"" + i + "\">" + data.roleList[i].name + "</label>\n                               ";
                    }
                    html += "</td></tr>";
                    $(".user-form table tbody").html(html);
                    $(".new-add").removeClass("hide");
                    var ml = $(".new-add").width();
                    $('body').css({ "padding-right": ml - ht + "px" });
                    fixUser();
                }
            }
        });
    }
    //修改人员信息
    function fixUser() {
        $(".new-add .save").click(function () {
            if (isEmpty() == 1) {
                return;
            } else if (isEmpty() == 2) {
                console.log(isEmpty());
                alert("请分配角色");
                return;
            }
            var obj = $(".user-form").serializeObject();
            if (!(obj.rolesitems instanceof Array)) {
                obj.rolesitems = [obj.rolesitems];
            }
            $.ajax({
                url: "/wzmanage/user/update",
                type: "post",
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(obj),
                success: function success(data) {
                    console.log("update" + data);
                    if (data == "OK") {
                        $('body').css({
                            "overflow-x": "auto",
                            "overflow-y": "auto",
                            'padding-right': '0px'
                        });
                        $(".new-add").addClass("hide");
                        $(".add-success h3").html("修改人员成功");
                        $(".add-success").css("display", "block");
                        setTimeout(function () {
                            $(".add-success").fadeOut();
                        }, 500);
                        loadList();
                    }
                },
                error: function error(data) {
                    console.log(data);
                }
            });
        });
    }
    //新增人员信息html
    function addHtml() {
        $.ajax({
            type: "post",
            url: "/wzmanage/user/addView",
            contentType: "application/json;charset=utf-8",
            success: function success(data) {
                console.log(data);
                var html = '';

                html = "<tr>\n                                        <td>\u59D3\u540D:</td>\n                                        <td><input class=\"form-control\" name=\"name\" type=\"text\"><span class=\"glyphicon glyphicon-user\"></span></td>\n                                        <td>\u6027\u522B:</td>\n                                        <td>\n                                            <input id=\"sexMan\" name=\"sex\" checked type=\"radio\" value=\"\u7537\">\n                                            <label for=\"sexMan\">\u7537</label>\n                                            <input id=\"sexWoman\" name=\"sex\" type=\"radio\" value=\"\u5973\">\n                                            <label for=\"sexWoman\">\u5973</label>\n                                        </td>\n                            </tr>\n                            <tr> \n                               <td>\u6635\u79F0:</td>\n                               <td> <input type=\"text\" class=\"form-control\" name=\"nickName\"></td>\n                               <td>\u5EA7\u673A\u53F7:</td>\n                               <td><input type=\"text\" class=\"form-control\" name=\"fixPhone\"></td>     \n                            </tr>\n                            <tr>\n                                <td>\u624B\u673A:</td>\n                                <td><input class=\"form-control\" name=\"phone\" type=\"text\"></td>\n                                <td>\u5E74\u9F84:</td>\n                                <td><input class=\"form-control\" name=\"age\"  type=\"text\"></td>\n                            </tr>\n                            <tr>\n                               <td>qq:</td>\n                               <td><input type=\"text\" class=\"form-control\" name=\"qq\"></td> \n                                <td>\n                                    \u804C\u4F4D:\n                                </td>\n                                <td>\n                                    <input name=\"job\" class=\"form-control\" type=\"text\">\n                                </td>\n                            </tr>\n                            <tr>\n                                <td>\u4E0A\u5C97\u8BC1\u7F16\u53F7:</td>\n                                <td><input name=\"postId\" class=\"form-control\" type=\"text\"></td>\n                                 <td>\u6240\u5C5E\u5206\u7EC4:</td>\n                                <td>\n                                    <select name=\"usersGroup\" class=\"form-control\" >\n                                    <option value=\"\u9884\u62A5\u7EC4\">\u9884\u62A5\u7EC4</option>\n                                    <option value=\"\u91C7\u96C6\u7EC4\">\u91C7\u96C6\u7EC4</option>\n                                </select>\n                                </td>\n                                \n                            </tr>\n                            <tr>\n                                <td>\u662F\u5426\u9501\u5B9A:</td>\n                                <td><select name=\"locked\" class=\"form-control\" >\n                                    <option value=\"false\">\u4E0D\u9501\u5B9A</option>\n                                    <option value=\"true\">\u9501\u5B9A</option>\n                                </select></td>\n                                <td>\u90AE\u7BB1:</td> \n                               \n                               <td><input type=\"text\" class=\"form-control\" name=\"mail\"></td> \n                            </tr>\n                            <tr>\n                               \n                               \n                                <td>\u89D2\u8272\u5206\u914D:</td>\n                                <td colspan=\"3\">\n                            ";
                for (var i = 0; i < data.length; i++) {
                    html += "\n\n                                <input  type=\"checkbox\" name=\"rolesitems\" id=\"" + i + "\" value=\"" + data[i].id + "\">\n                                <label style=\"margin: 0 5px 0 0 \" for=\"" + i + "\">" + data[i].name + "</label>\n                               ";
                }
                html += "</td></tr>";

                $(".user-form table tbody").html(html);
            }
        });
    }

    //根据条件查询
    $(".check-info .search").click(function () {
        var names = $(".checkCon input[name='name']").val();
        console.log(names)
        if (!names) return;
        $.ajax({
            url: "/wzmanage/user/find?name=" + names,
            type: "get",
            dataType:"json",
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            success: function success(data) {
                console.log("data",data)
                if (data.length > 0) {
                    for (var i = 0, html; i < data.length; i++) {
                        html += "<tr>\n                        <td class=\"userName\"><span>" + data[i].name + "</span>\n                         <input type=\"hidden\" class=\"locked\" value=\"" + data[i].locked + "\">\n                         <input type=\"hidden\" class=\"id\" value=\"" + data[i].id + "\"></td>\n                         \n                        <td class=\"nickName\">" + data[i].nickName + "</td>\n                        <td class=\"sex\">" + data[i].sex + "</td>\n                        <td class=\"phone\">" + data[i].phone + "</td>\n                        <td class=\"fixPhone\">" + data[i].fixPhone + "</td>\n                        \n                        <td class=\"age\">" + data[i].age + "</td>\n                        <td class=\"posId\">" + data[i].postId + "</td>\n                        <td class=\"createTime\">" + data[i].createTime.slice(0, 10) + "</td>\n                        <td class=\"job\">" + data[i].job + "</td> \n                        <td class=\"usersGroup\">" + data[i].usersGroup + "</td>\n                        <td class=\"qq\">" + data[i].qq + "</td>\n                        <td class=\"mail\">" + data[i].mail + "</td>\n               \n                    </tr>";
                    }
                } else {
                    html = "<tr><td colspan=\"12\">\u65E0\u67E5\u8BE2\u5185\u5BB9</td></tr>";
                }
                $(".user-list tbody").html(html);

            }
        });
    });
    //判断是否为checked
    function ischecked(roleList, lis) {

        for (var j = 0; j < roleList.length; j++) {
            if (roleList[j] == lis) {
                return 'checked';
            }
        }
        return "";
    }
    //验证非空
    function isEmpty() {
        var inps = $(".new-add").find("input:not([name='fixPhone'])");
        var phone = $(".new-add").find("input[name='phone']");
        var che = $(".new-add").find("input[name='rolesitems']");
        if (che.length == 0) return 3;

        console.log();
        for (var i = 0; i < inps.length; i++) {
            if (!inps[i].value) {
                inps[i].focus();
                $(inps[i]).attr("placeholder", "不能为空");
                return 1;
            }
        }
        if (!/^(\+86|0086)?\s*1[34578]\d{9}$/.test(phone.val())) {
            phone.val("  ");
            phone.focus();
            phone.attr("placeholder", "请英文下填写正确的手机号");
            return 1;
        }
        for (var i = 0; i < che.length; i++) {
            console.log($(che[i]).prop("checked"));
            if ($(che[i]).prop("checked")) return 0;
        }

        return 2;
    }
    //插件
    $.fn.serializeObject = function () {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function () {
            if (o[this.name]) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };
});